<template>
    <div class="views" :style="{padding}">
        <div class="item" v-for="(item, i) in imagesUrls" :key="i">
            <el-image :src="item" :fit="fit" :style="{ width, height }" :preview-src-list="imagesUrls">
              <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        images: {
            type: Array,
            default: () => []
        },
        padding: {
            type: String,
            default: '0px'
        },
        width: {
            type: String,
            default: '70px'
        },
        height: {
            type: String,
            default: '70px'
        },
        fit: {
            type: String,
            default: 'cover'
        }
    },
    computed: {
        imagesUrls() {
            const [p1] = this.images
            if (!p1) {
              return []
            }
            if (typeof p1 === 'string') {
                return this.images
            } else {
                return this.images.map((item) => item.resourceUrl)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.views {
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item {
        margin-right: 6px;
        line-height: 0px;
        /deep/ img {
            border-radius: 4px;
        }
        .el-image{
          display: inline-flex;
          justify-content: center;
          align-items: center;
        }
    }
}
</style>
